<template>
	<view class="content">
		<view class="box">
			<view class="people-box u-flex">
				<view class="box-title">
					会议名称
				</view>
				<view class="imgs-box u-flex">
					<u-input v-model="form.name" placeholder="请输入会议名称" inputAlign="right" fontSize="13"
						class="u-flex-input"></u-input>
					<!-- <u-icon name="arrow-right" color="#666666" size="14"></u-icon> -->
				</view>
			</view>
			<view class="people-box u-flex">
				<view class="box-title">
					会议室地点
				</view>
				<view class="imgs-box u-flex">
					<u-input v-model="form.title" placeholder="请输入会议室地点" inputAlign="right" fontSize="13"
						class="u-flex-input"></u-input>
					<!-- <u-icon name="arrow-right" color="#666666" size="14"></u-icon> -->
				</view>
			</view>
			<view class="people-box u-flex">
				<view class="box-title">
					容纳人数
				</view>
				<view class="imgs-box u-flex">
					<u-input v-model="form.people" placeholder="请输入容纳人数" inputAlign="right" fontSize="13"
						class="u-flex-input"></u-input>
					<!-- <u-icon name="arrow-right" color="#666666" size="14"></u-icon> -->
				</view>
			</view>
			<view class="people-box u-flex">
				<view class="box-title">
					会议室类型
				</view>
				<view class="imgs-box u-flex">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
						<view class="uni-input u-flex-input">{{array[index].name}}</view>
					</picker>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>
			<view class="people-box u-flex">
				<view class="box-title">
					权重
				</view>
				<view class="imgs-box u-flex">
					<u-input v-model="form.weigh" placeholder="请输入权重" inputAlign="right" fontSize="13" type="number"
						class="u-flex-input"></u-input>
					<!-- <u-icon name="arrow-right" color="#666666" size="14"></u-icon> -->
				</view>
			</view>
			<view class="people-box u-flex">
				<view class="box-title">
					状态
				</view>
				<view class="imgs-box u-flex">
					<picker @change="bindPickerChange2" :value="index" :range="array2" range-key="name">
						<view class="uni-input u-flex-input">{{array2[index2].name}}</view>
					</picker>
					<!-- <u-input v-model="form.type" placeholder="请输入会议名称"  inputAlign="right" fontSize="13"
									class="u-flex-input"></u-input> -->
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>
			<view class="people-box u-flex">
				<view class="box-title">
					功能室管理员
				</view>
				<view class="imgs-box u-flex">
					<view class="item-img-bg" v-for="(item1,i) in manager_ids_array" :key="i" v-if="i<1">{{strFormat(item1.name)}}</view>
					<!-- <u--image class="user-img" v-for="(item1,i) in manager_ids_array" v-if="i<1" :key="i"
						:src="item1.avatar" shape="circle" width="40rpx" height="40rpx">
					</u--image> -->
					<text class="add-btn" @click="pickUser('manager')">+</text>
					<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
				</view>
			</view>

		</view>
		<u-button class="save-btn" @click="saveForm">保存</u-button>
		<!-- 会议室类型弹框 -->
		<!-- 签到方式弹框 -->
	</view>
</template>

<script>
	import {
		getroomdetail,
		getroomdedit
	} from '@/api/meetRoomApi.js'
	export default {
		data() {
			return {
				auth_icon: require('@/static/img/mettingRoomConfig/auth-icon.png'),
				form: {
					name: '',
					title: '',
					people: '',
					room_type: '',
					weigh: 0,
					status: '',
					manager_ids:[]
				},
				info: {
					manager_ids_user:[]
				},
				manager_ids_array:[],
				array: [{
					id: '0',
					name: '固定'
				}, {
					id: '1',
					name: '临时'
				}],
				//状态:1=已经通过,2=待审批1（审核会议室） ,3=待审批2（校长审核审核会议）,21=会议室驳回,31=校长驳回，9=会议结束 0=草稿
				// array2: [{id:'1',name: '已经通过'},{id:'2',name:'待审批1（审核会议室）'},{id:'3',name:'待审批2（校长审核审核会议）'} ,
				// {id:'21',name:"会议室驳回"},{id:'31',name:'校长驳回'},{id:'9',name:'会议结束'},{id:'0',name:'草稿'}],
				array2: [{
					id: '0',
					name: '关闭'
				}, {
					id: '1',
					name: '开放'
				}],
				index: 0,
				index2: 0,
				type: "",
			};
		},
		onReady(){
			this.getroomdetailData(this.$route.query.id)
		},
		onLoad(options) {},
		onShow() {
			var userlist = uni.getStorageSync('sel_user_list');
			var ids = '';
			var users = [];
			console.log("userlist",userlist,userlist.length>0);
			if(userlist&&userlist.length>0){
				for (var i = 0; i < userlist.length; i++) {
				  ids = i == 0 ? userlist[i].id : ids + "," + userlist[i].id;
				}
				users=userlist;
				// if (uni.getStorageSync('ext_data')) {
				//   this.form = Object.assign(this.form, uni.getStorageSync('ext_data'));
				// }
				console.log("111",this.form)
				if (this.type == "manager") {
					this.form.manager_ids = users;
					this.info.manager_ids_user = ids;
				}
				// this.$forceUpdate()
				uni.setStorageSync('ext_data', this.form);
				this.manager_ids_array=this.form.manager_ids
				console.log("222",ids,users,this.form)
			}
		},
		methods: {
			strFormat(str){
				if(str.length>3){
					return str.substring(0,3)+'...';
				}else{
					return str
				}
			},
			getroomdetailData(id) {
				let params = {
					id: id
				}
				getroomdetail(params).then(res => {
					console.log(res)
					this.form = res.data
					this.form.manager_ids=[];
					this.form.manager_ids.push({
						id: this.form.wx_userid,
						name: this.form.nickname,
						avatar: this.form.avatar
					})
					this.info.manager_ids_user=this.form.manager_id
					this.manager_ids_array=this.form.manager_ids
					if(this.array.length>0){
						this.array.forEach((e,idx)=>{
							if(e.id==this.form.room_type){
								this.index=idx
							}
						})
					}
					if(this.array2.length>0){
						this.array2.forEach((e,idx)=>{
							if(e.id==this.form.status){
								this.index2=idx
							}
						})
					}
				   uni.setStorageSync('ext_data', this.form);
				   uni.removeStorageSync('sel_user_list');
				})
			},

			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.index = e.detail.value
				this.form.room_type = this.array[this.index].id
			},
			bindPickerChange2: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.index2 = e.detail.value
				this.form.status = this.array2[this.index2].id
			},
			pickUser(type) {
				this.type = type;
				var user_ids = 0;
				if (this.type == "manager") {
				    user_ids = this.info.manager_ids_user;
				}
				uni.setStorageSync('sel_user_ids', "0," + user_ids);
				const url = "/pages/tabbar/meeting-room/change/index?user_ids=" + user_ids
				uni.navigateTo({
					url,
				});

			},
			saveForm() {
				let params = {
					id: this.form.id,
					name: this.form.name,
					title: this.form.title,
					status: this.form.status,
					room_type: this.form.room_type,
					weigh: this.form.weigh,
					manager_id: JSON.stringify(this.form.manager_ids),
					people: this.form.people,
				}
				console.log("111--params", params)
				getroomdedit(params).then(res => {
					console.log(res)
					if (res.code ===1) {
						uni.removeStorageSync('ext_data');
						this.$toast('保存成功');
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					} else {
						this.$toast(res.msg);
					}

				})
			}
		}

	};
</script>

<style>
	.content {
		background-color: #F8F8F8;
		min-height: 100vh;
		padding-bottom: 150rpx;
	}

	.u-flex {
		display: flex;
		align-items: center;
		
	}
    .imgs-box{display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		flex: 1;}
	.title-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		width: 80%;
	}

	.user text {
		font-size: 24rpx;
		font-weight: 500;
		color: #4871C0;
		margin-left: 10rpx;
	}

	.box-part {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx 30rpx 10rpx 30rpx;
	}

	.box-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		width: 140rpx;
	}

	.box-row {
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.box-row text:first-child {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}

	.box-row text:last-child {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.box {
		background-color: #fff;
		margin-top: 20rpx;
	}

	.people-box {
		justify-content: space-between;
		padding: 30rpx;
	}

	/deep/..uni-picker-container .uni-picker-custom * {
		color: #333333 !important;
		font-size: 28rpx !important;
	}

	.u-flex-input {
		color: #333333 !important;
		font-size: 28rpx !important;
	}

	.u-flex-input .uni-input-placeholder {
		color: #999999 !important;
		text-align: right !important;
		font-size: 28rpx !important;
	}

	.people-box:first-child {
		border-bottom: 2px solid #F8F8F8;
	}

	.add-btn {
		background-color: #4871C0;
		border-radius: 100%;
		color: #ffffff;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.user-img {
		margin-right: 20rpx;
	}
    .item-img-bg{
		   margin-right: 20rpx;
    	   width:64rpx;
    		height:64rpx;
    		border-radius: 50%;
    		background-color: #4871C0;
    		color: #ffffff;
    		font-size: 20rpx;
    		text-align: center;
    		line-height: 64rpx;
    }
	.box-content {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		padding: 30rpx 0;
		border-bottom: 2px solid #F8F8F8;
		margin-bottom: 20rpx;
	}

	.file-box {
		margin: 20rpx 0;
		padding: 20rpx;
		background: #F8F9FC;
		border-radius: 16rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: 500;
		color: #4871C0;
	}

	.save-btn {
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 0;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
		background-color: #4871C0;
		border-radius: 8rpx;
		width: calc(100% - 40rpx);
	}

	.color-blue {
		color: #4871C0 !important;
	}

	/deep/ .u-modal__content {
		text-align: center !important;
	}

	.reason-content {
		width: 100%;
		border-radius: 8rpx;
		opacity: 1;
	}

	/deep/ .u-modal__content {
		text-align: center !important;
	}

	/deep/.u-textarea {
		background: #F8F8F8;
		border-radius: 8rpx;
		opacity: 1;
		text-align: left;
	}

	/deep/.uni-textarea-placeholder {
		text-align: left;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}

	.rect {
		width: 638rpx;
		height: 588rpx;
		margin: 50% auto;
		text-align: center;
		position: relative;
	}

	.bg-img {
		width: 638rpx;
		height: 588rpx;
	}

	.warp-content {
		width: 100%;
		position: absolute;
		top: 48%;
		right: 0;
		display: flex;
		flex-direction: column;
		font-size: 36rpx;
		font-weight: bold;
		color: #666666;
		line-height: 60rpx;
	}

	.warp-button {
		width: 356rpx;
		height: 87rpx;
		line-height: 87rpx;
		text-align: center;
		background: #4871C0;
		border-radius: 16rpx;
		opacity: 1;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin: 40rpx auto;
	}

	.clsoe {
		position: absolute;
		right: 30rpx;
		top: 22%;
	}

	.warp-button2 {
		background: #FF7A00;
	}

	.sign-box {
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}

	.file-content {
		width: 90%;
		word-break: break-all;
	}

	.box-between {
		justify-content: space-between;
	}

	.sign-box {
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}

	.prople-num {
		font-size: 28rpx;
		font-weight: 500;
		color: #4871C0;
		text-align: right;
		margin: 30rpx 0;
	}

	.end {
		justify-content: end;
	}

	.push-button {
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}
</style>
